﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
        * {
            margin: 0px;
            padding: 0px;
            font-size: 20px;
        }

        body {
            color: #FFD700;
        }

        .main {
            width:200px;
            height:710px;
            background-image: url(bgImage1.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            text-align:center;
        }
    </style>
</head>
<body>
    <!--<input type="text" id="txtOne" />
    <input type="button" id="btnOne" value="发送内容" />-->
    <div class="main">
        <ul id="result" style="padding-top: 143px;">
            <li>曾伟(20岁) 11:30</li>
        </ul>
    </div>
    <!--依赖文件-->
    <script src="../Scripts/jquery-1.6.4.min.js"></script>
    <script src="../Scripts/jquery.signalR-2.2.2.min.js"></script>
    <!--加载hub客户端js代理 -->
    <script src="/signalr/hubs"></script>
    <script>
        var index = 0;
        var maxCount = 16;

        //创建 MsgHub js实例
        $.connection.hub.url = "/signalr";
        // Set the name
        $.connection.hub.qs = "name=WebHistoryClient";

        var msgHub = $.connection.msgHub;
        //启用客户端日志
        $.connection.hub.logging = true;

        //注册客户端接收事件处理
        msgHub.client.receive = function (content) {
            var obj = JSON.parse(content);
            switch (Array.prototype.shift.call(obj)) {
                case "append":
                    break;
                case "create":
                    $('#result').html("");
                    break;
            }

            $.each(obj, function (key, val) {
                index++;
                $('#result').prepend($("<li>" + val + "</li>"));
                if (index > maxCount)
                {
                    $('ul li').eq(-1).remove();
                }
            });
        }

        //启动监听
        $.connection.hub.start().done(function () {
            //调用服务端发送消息
            //$('#btnOne').click(function () {
            //    var text = $('#txtOne').val();
            //    msgHub.server.sendPrivateMessage("ConsoleClient", text);
            //});
        });
    </script>
</body>
</html>
